<template>
  <div>
    <div class="filter-container">
      <el-input
        v-model="listQuery4GoodsSku.title"
        size="small"
        clearable
        placeholder="商品名称"
        style="width: 220px;"
        class="filter-item"
        @keyup.enter.native="loadGoodsSku"
      />
      <el-select
        v-model="listQuery4GoodsSku.status"
        size="small"
        placeholder="上线状态"
        class="filter-item"
        clearable
      >
        <el-option
          v-for="(opt) in $constants.goodsStatusOptions"
          :key="opt.value"
          :label="opt.title"
          :value="opt.value"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-refresh"
        @click="loadGoodsSku"
      >搜索</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        @click="handleImportGoodsSku"
      >导入商品</el-button>
    </div>
    <el-table
      v-loading="listLoading4GoodsSku"
      :data="list4GoodsSku"
      height="600"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="商品名称" min-width="200px" align="center">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="商品分类" width="80px" align="center">
        <template slot-scope="scope">{{ scope.row.category_name }}</template>
      </el-table-column>
      <el-table-column label="商品封面" width="120px" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover|imgUrl" alt style="width:100px;" />
        </template>
      </el-table-column>
      <el-table-column label="商品价格" width="80px" align="center">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column label="会员价格" width="80px" align="center">
        <template slot-scope="scope">{{ scope.row.member_price }}</template>
      </el-table-column>
      <el-table-column v-if="value.price_type===0" label="活动价格" width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number
            :min="0"
            v-model="scope.row.activity_price"
            style="width:100px"
            size="mini"
            placeholder="活动价格"
            @change="handleSetActivityPrice(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column v-if="value.price_type===0" label="活动会员价格" width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number
            :min="0"
            v-model="scope.row.activity_member_price"
            style="width:100px"
            size="mini"
            placeholder="活动会员价格"
            @change="handleSetActivityMemberPrice(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status | onOrOffColorFilter"
          >{{ scope.row.status | onOrOffFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="130"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="selectGoodsSku(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery4GoodsSku.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery4GoodsSku.pageSize"
        :total="total4GoodsSku"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange4GoodsSku"
        @current-change="handleCurrentChange4GoodsSku"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ActivityGoods",
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          id: 0
        };
      }
    }
  },
  data() {
    return {
      list4GoodsSku: [],
      listLoading4GoodsSku: false,
      total4GoodsSku: 0,
      listLoading: true,
      listQuery4GoodsSku: {
        page: 1,
        pageSize: 10,
        status: 1,
        title: ""
      }
    };
  },
  watch: {
    value() {
      this.loadGoodsSku();
    }
  },
  created() {
    this.loadGoodsSku();
  },
  methods: {
    handleSetActivityPrice(row) {
      this.$service.goodsActivity.setActivityGoodsSkuPrice({
        activityId: this.value.id,
        goodsSkuId: row.id,
        price: row.activity_price
      });
    },
    handleSetActivityMemberPrice(row) {
      this.$service.goodsActivity.setActivityGoodsSkuMemberPrice({
        activityId: this.value.id,
        goodsSkuId: row.id,
        price: row.activity_member_price
      });
    },
    handleImportGoodsSku() {
      this.$emit("onImportGoodsSku");
    },
    handleSizeChange4GoodsSku(size) {
      this.listQuery4GoodsSku.pageSize = size;
      this.loadGoodsSku();
    },
    selectGoodsSku(row) {
      this.$service.goodsActivity
        .removeGoodsFromActivity(row.id, this.value.id)
        .then(_ => {
          this.loadGoodsSku();
        });
    },
    loadGoodsSku() {
      if (!this.value || !this.value.id) {
        return;
      }
      this.listLoading4GoodsSku = true;
      this.listQuery4GoodsSku.goodsActivityId = this.value.id;
      this.$service.goods
        .listDefaultGoods(this.listQuery4GoodsSku)
        .then(response => {
          this.list4GoodsSku = response.rows;
          this.total4GoodsSku = response.total;
        })
        .finally(_ => {
          this.listLoading4GoodsSku = false;
        });
    },
    handleCurrentChange4GoodsSku(page) {
      this.listQuery4GoodsSku.page = page;
      this.loadGoodsSku();
    }
  }
};
</script>
